<template>
  <div class="login-main">
    <div class="login-5G">
      <img
        src="../../assets/images/login/5g.png"
        alt=""
      >
      <span>产业智联新时代</span>
    </div>
    <div class="login-content">
      <el-row class="login-title clearfix">
        <el-col :span="4">
          <img
            src="../../assets/images/icon/logo.png"
            style="width:220px"
          >
        </el-col>
        <el-col :span="18">
          <h1 style="font-size:40px">
            商务信息管理系统
          </h1>
        </el-col>
      </el-row>
      <div class="login-tab">
        <div class="login_form">
          <img
            src="../../assets/images/login/shadow-left.png"
            alt=""
            class="shadow-left"
          >
          <img
            src="../../assets/images/login/shadow-right.png"
            alt=""
            class="shadow-right"
          >
          <h2>欢迎登陆</h2>
          <el-row>
            <el-col
              :span="24"
              class="mgt-50"
            >
              <el-form
                ref="ruleForm"
                label-position="left"
                :model="ruleForm"
                :rules="rules"
                label-width="0px"
                class="demo-ruleForm login-container"
              >
                <!-- <el-input v-model="username" class="" placeholder="请输入用户名" prefix-icon="icon-user mgl-2" />
              <el-input v-model="password" class="mgt-20" type="password" placeholder="请输入密码" prefix-icon="icon-pwd mgl-2" /> -->
                <el-form-item prop="userName">
                  <el-input
                    v-model="ruleForm.userName"
                    type="text"
                    auto-complete="off"
                    placeholder="请输入用户名"
                    prefix-icon="icon-user mgl-2"
                  />
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="ruleForm.password"
                    type="password"
                    auto-complete="off"
                    placeholder="请输入密码"
                    prefix-icon="icon-pwd mgl-2"
                  />
                </el-form-item>
                <div class="relative clearfix mgt-20">
                  <el-row>
                    <el-col :span="14">
                      <el-form-item prop="checkCode">
                        <el-input
                          v-model="ruleForm.checkCode"
                          type="text"
                          prefix-icon="icon-code mgl-2"
                          auto-complete="off"
                          placeholder="图形验证码"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col
                      :span="10"
                      class="code-box"
                    >
                      <img
                        :src="codeImageUrl"
                        alt=""
                        class="codeimg"
                        @click="getCode()"
                      >
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </el-col>
          </el-row>
          <div class="mgt-25">
            <el-button
              class="g-login-btn"
              type="primary"
              @click="loginIn"
            >
              登 录
            </el-button>
          </div>
        </div>
      </div>
      <p>技术支持 泰豪集团</p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import util from '@/utils/util';
import aesUtil from '@/utils/aesUtil';
Vue.prototype.utils = util;
import {getCaptcha,login,getUserInfo} from '@/api/login';
import { mapActions } from 'vuex';
export default {
	name: 'Login',
	data () {
		return {
			codeImageUrl: '',
			ruleForm: {
				userName: 'admin',
				password: 'uG2c1584EOpw981!',
				checkCode: '',
				captchaKey:''
			},
			rules: {
				userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			},
		};
	},
	mounted() {
		this.getCode();
	},
	methods: {
		...mapActions(['']),
		// ...mapMutations(['login']),
		getCode(){
			getCaptcha().then(({data}) => {
				if(data.code === 0){
					this.codeImageUrl = 'data:image/jpeg;base64,'+data.data.captchaImage;
					this.ruleForm.captchaKey = data.data.captchaKey;
				}
			});
		},
		loginIn() {
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					this.ruleForm.password = aesUtil.encrypt(this.ruleForm.password);
					login(this.ruleForm).then(({data}) => {
						if (data.code === 0) {
							getUserInfo().then(({data})=>{
								// this.login(data.data);
								this.$store.commit('loginStore/login',data.data);
								this.$router.push({ path: '/' });
							});
						} else {
							this.getCode();
							this.$message.error(data.msg);
							return false;
						}
					});
				}
			});
		},
	}
};
</script>


